<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <el-container class="main">
    <el-aside :width="tabWidth+'px'">
      <el-scrollbar>
        <div class="isClossTab">相片管理</div>
        <el-menu router :class="'menu'" 
                 :default-active="$route.path"
                 class="el-menu-vertical-demo"
                 @select="handleSelect"
                 @open="handleOpen"
                 @close="handleClose"
                 :collapse="false"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b">
            <el-submenu index="1">
              <template slot="title">
                <span>相片</span>
              </template>
              <el-submenu :index="year" :key="year" v-for="year in timeflow2">
                <template slot="title">{{year}}</template>
                <el-menu-item :index="'/images/'+item" v-for="item in timeflow" :key="'/images/'+item" v-if="item.indexOf(year)>-1">{{item}}</el-menu-item>
              </el-submenu>
            </el-submenu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header class="main-header">
        <div style="width:800px; float:left;height: 60px; padding-top:8px;">
          <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="照片" value="1"></el-option>
              <el-option label="活动" value="2"></el-option>
              <el-option label="生活" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
          </el-input>
            
        </div>

      </el-header>
      <el-main>
        <el-breadcrumb separator="/" class="crumbs">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>照片</el-breadcrumb-item>
        </el-breadcrumb>
        <div><!-- <RouterView /> -->
        
          <router-view :key="randomKey" :part-info="list" :params="params"></router-view>
          
        </div>
      </el-main>
      <el-footer class="main-footer" height="50px">
        <p>@Sya</p>
      </el-footer>
    </el-container>
  </el-container>

  
</template>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.wocaoimg{
  background-color:#f0F0F0;margin: 4px 4px;
}

.infinite-list-wrapper .list-item + .list-item {
  margin-top: 10px;
}
.infinite-list-wrapper .list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: #fff6f6;
  color: #ff8484;
}
.infinite-list-wrapper .list {
  list-style: none;
}
.infinite-list-wrapper {
  text-align: center;
}
</style>
